导航菜单

指引

静态资源处理将资源引入为 URL显式 URL 引入将资源引入为字符串导入脚本作为 Workerpublic 目录new URL(url, import.meta.url)静态资源处理相关: 公共基础路径相关: assetsInclude 配置项将资源引入为 URL

服务时引入一个静态资源会返回解析后的公共路径:

import imgUrl from './img.png'document.getElementById('hero-img').src = imgUrl

例如,imgUrl 在开发时会是 /img.png,在生产构建后会是 /assets/img.2d8efhg.png。

行为类似于 Webpack 的 file-loader。区别在于导入既可以使用绝对公共路径(基于开发期间的项目根路径),也可以使用相对路径。

url() 在 CSS 中的引用也以同样的方式处理。

如果 Vite 使用了 Vue 插件,Vue SFC 模板中的资源引用都将自动转换为导入。

常见的图像、媒体和字体文件类型被自动检测为资源。你可以使用 assetsInclude 选项 扩展内部列表。

引用的资源作为构建资源图的一部分包括在内,将生成散列文件名,并可以由插件进行处理以进行优化。

较小的资源体积小于 assetsInlineLimit 选项值 则会被内联为 base64 data URL。

显式 URL 引入

未被包含在内部列表或 assetsInclude 中的资源,可以使用 ?url 后缀显式导入为一个 URL。这十分有用,例如,要导入 Houdini Paint Worklets 时:

import workletURL from 'extra-scalloped-border/worklet.js?url'CSS.paintWorklet.addModule(workletURL)将资源引入为字符串

资源可以使用 ?raw 后缀

相关推荐: